<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="stable/static/css/site.css" rel="stylesheet" type="text/css">
    <link href="stable/static/css/print.css" rel="stylesheet" type="text/css" media="print">
    <link href="stable/static/css/prettify.css" rel="stylesheet" type="text/css">
    <link href="//www.google.com/images/icons/product/chrome-16.png" rel="icon" type="image/ico">
    <title>Themes - chrome插件中文开发文档(非官方)</title>
  </head>
  <body>
    <a id="top"></a>
    <div id="header">{Header content}</div>
    <a id="gc-topnav-anchor"></a>
    <div id="gc-topnav">
      <h1>Google Chrome Extensions</h1>
      <ul id="home" class="gc-topnav-tabs">
        <li id="home_link">
          <a href="index.html" title="Google Chrome Extensions home page"><div>Home</div></a>
        </li>
        <li id="docs_link">
          <a href="docs.html" title="Official Google Chrome Extensions documentation"><div>Docs</div></a>
        </li>
        <li id="faq_link">
          <a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions"><div>FAQ</div></a>
        </li>
        <li id="samples_link">
          <a href="samples.html" title="Sample Extensions (with source code)"><div>Samples</div></a>
        </li>
        <li id="group_link">
          <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum"><div>Group</div></a>
        </li>
        <li id="so_link">
          <a href="http://stackoverflow.com/questions/tagged/google-chrome-extension" title="[google-chrome-extension] tag on Stack Overflow"><div>Questions?</div></a>
        </li>
      </ul>
    </div>
    <div id="gc-container">
      <div id="gc-sidebar">
        <ul 
            class="level1 ">
          <li class="level2">
                <a href="getstarted.html" class="level2 ">Getting Started</a>
          </li>
          <li class="level2">
                <a href="overview.html" class="level2 ">Overview</a>
          </li>
          <li class="level2">
                <a href="whats_new.html" class="level2 ">What's New?</a>
          </li>
          <li class="level2">
                <a href="devguide.html" class="level2 ">Developer's Guide</a>
              <ul 
                  class="level2 ">
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Browser UI</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="browserAction.html" class="level4 ">Browser Actions</a>
                      </li>
                      <li class="level4">
                            <a href="contextMenus.html" class="level4 ">Context Menus</a>
                      </li>
                      <li class="level4">
                            <a href="notifications.html" class="level4 ">Desktop Notifications</a>
                      </li>
                      <li class="level4">
                            <a href="omnibox.html" class="level4 ">Omnibox</a>
                      </li>
                      <li class="level4">
                            <a href="options.html" class="level4 ">Options Pages</a>
                      </li>
                      <li class="level4">
                            <a href="override.html" class="level4 ">Override Pages</a>
                      </li>
                      <li class="level4">
                            <a href="pageAction.html" class="level4 ">Page Actions</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Browser Interaction</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="bookmarks.html" class="level4 ">Bookmarks</a>
                      </li>
                      <li class="level4">
                            <a href="cookies.html" class="level4 ">Cookies</a>
                      </li>
                      <li class="level4">
                            <a href="devtools.html" class="level4 ">Developer Tools</a>
                      </li>
                      <li class="level4">
                            <a href="events.html" class="level4 ">Events</a>
                      </li>
                      <li class="level4">
                            <a href="history.html" class="level4 ">History</a>
                      </li>
                      <li class="level4">
                            <a href="management.html" class="level4 ">Management</a>
                      </li>
                      <li class="level4">
                            <a href="tabs.html" class="level4 ">Tabs</a>
                      </li>
                      <li class="level4">
                            <a href="windows.html" class="level4 ">Windows</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Implementation</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="a11y.html" class="level4 ">Accessibility</a>
                      </li>
                      <li class="level4">
                            <a href="event_pages.html" class="level4 ">Event Pages</a>
                      </li>
                      <li class="level4">
                            <a href="contentSecurityPolicy.html" class="level4 ">Content Security Policy</a>
                      </li>
                      <li class="level4">
                            <a href="content_scripts.html" class="level4 ">Content Scripts</a>
                      </li>
                      <li class="level4">
                            <a href="xhr.html" class="level4 ">Cross-Origin XHR</a>
                      </li>
                      <li class="level4">
                            <a href="i18n.html" class="level4 ">Internationalization</a>
                      </li>
                      <li class="level4">
                            <a href="messaging.html" class="level4 ">Message Passing</a>
                      </li>
                      <li class="level4">
                            <a href="permissions.html" class="level4 ">Optional Permissions</a>
                      </li>
                      <li class="level4">
                            <a href="npapi.html" class="level4 ">NPAPI Plugins</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Finishing</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="hosting.html" class="level4 ">Hosting</a>
                      </li>
                      <li class="level4">
                            <a href="external_extensions.html" class="level4 ">Other Deployment Options</a>
                      </li>
                    </ul>
                </li>
              </ul>
          </li>
          <li class="level2">
                <a href="tutorials.html" class="level2 ">Tutorials</a>
              <ul 
                  class="level2 ">
                <li class="level3">
                      <a href="tut_migration_to_manifest_v2.html" class="level3 ">Manifest V2</a>
                </li>
                <li class="level3">
                      <a href="tut_debugging.html" class="level3 ">Debugging</a>
                </li>
                <li class="level3">
                      <a href="tut_analytics.html" class="level3 ">Google Analytics</a>
                </li>
                <li class="level3">
                      <a href="tut_oauth.html" class="level3 ">OAuth</a>
                </li>
              </ul>
          </li>
          <li class="level2">
                <span class="level2">Reference</span>
              <ul 
                  class="level2 ">
                <li class="level3">
                    <a class="button level3">
                      <span class="level3">Formats</span>
                      <div class="toggleIndicator level3"></div>
                    </a>
                    <ul toggleable
                        class="level3 hidden">
                      <li class="level4">
                            <a href="manifest.html" class="level4 ">Manifest Files</a>
                      </li>
                      <li class="level4">
                            <a href="match_patterns.html" class="level4 ">Match Patterns</a>
                      </li>
                    </ul>
                </li>
                <li class="level3">
                      <a href="permission_warnings.html" class="level3 ">Permission Warnings</a>
                </li>
                <li class="level3">
                      <a href="api_index.html" class="level3 ">chrome.* APIs</a>
                </li>
                <li class="level3">
                      <a href="api_other.html" class="level3 ">Other APIs</a>
                </li>
              </ul>
          </li>
          <li class="level2">
                <span class="level2">More</span>
              <ul 
                  class="level2 ">
                <li class="level3">
                      <a href="http://code.google.com/chrome/webstore/docs/index.html" class="level3 ">Chrome Web Store</a>
                </li>
                <li class="level3">
                      <a href="http://code.google.com/chrome/apps/docs/developers_guide.html" class="level3 ">Hosted Apps</a>
                </li>
                <li class="level3">
                      <a  class="level3 selected">Themes</a>
                </li>
              </ul>
          </li>
        </ul>
      </div>
      <div id="gc-pagecontent">
        <h1 class="page_title">Themes</h1>
        <div id="toc">
          <h2>Contents</h2>
          <ol>
            <li>
              <a href=#manifest> Manifest </a>
              <ol>
                <li><a href=#colors>colors</a></li><li><a href=#images>images</a></li><li><a href=#properties>properties</a></li><li><a href=#tints>tints</a></li>
              </ol>
            </li>
            <li>
              <a href=#moredoc> Additional documentation </a>
            </li>
          </ol>
        </div>

<p>
A <em>theme</em> is a special kind of extension
that changes the way the browser looks.
Themes are <a href="packaging.html">packaged</a> like regular extensions,
but they don't contain JavaScript or HTML code.
</p>

<p>
You can find and try a bunch of themes at the
<a href="https://chrome.google.com/webstore/category/themes">Chrome Web Store</a>.
</p>

<img src="stable/static/images/themes-1.gif"
     width="100" height="80" alt="grassy theme" />

<img src="stable/static/images/themes-2.gif"
     width="100" height="80" alt="dark theme" />

<img src="stable/static/images/themes-3.gif"
     width="100" height="80" alt="foggy theme" />

<h2 id="manifest"> Manifest </h2>
<p>
Here is an example
<a href="manifest.html"><code>manifest.json</code></a>
file for a theme:
</p>



<pre>
{
&nbsp;&nbsp;"version": "2.6",
&nbsp;&nbsp;"name": "camo theme",
<b>&nbsp;&nbsp;"theme": {
&nbsp;&nbsp; &nbsp;"<a href="#images">images</a>" : {
&nbsp;&nbsp; &nbsp; &nbsp;"theme_frame" : "images/theme_frame_camo.png",
&nbsp;&nbsp; &nbsp; &nbsp;"theme_frame_overlay" : "images/theme_frame_stripe.png",
&nbsp;&nbsp; &nbsp; &nbsp;"theme_toolbar" : "images/theme_toolbar_camo.png",
&nbsp;&nbsp; &nbsp; &nbsp;"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
&nbsp;&nbsp; &nbsp; &nbsp;"theme_ntp_attribution" : "images/attribution.png"
&nbsp;&nbsp; &nbsp;},
&nbsp;&nbsp; &nbsp;"<a href="#colors">colors</a>" : {
&nbsp;&nbsp; &nbsp; &nbsp;"frame" : [71, 105, 91],
&nbsp;&nbsp; &nbsp; &nbsp;"toolbar" : [207, 221, 192],
&nbsp;&nbsp; &nbsp; &nbsp;"ntp_text" : [20, 40, 0],
&nbsp;&nbsp; &nbsp; &nbsp;"ntp_link" : [36, 70, 0],
&nbsp;&nbsp; &nbsp; &nbsp;"ntp_section" : [207, 221, 192],
&nbsp;&nbsp; &nbsp; &nbsp;"button_background" : [255, 255, 255]
&nbsp;&nbsp; &nbsp;},
&nbsp;&nbsp; &nbsp;"<a href="#tints">tints</a>" : {
&nbsp;&nbsp; &nbsp; &nbsp;"buttons" : [0.33, 0.5, 0.47]
&nbsp;&nbsp; &nbsp;},
&nbsp;&nbsp; &nbsp;"<a href="#properties">properties</a>" : {
&nbsp;&nbsp; &nbsp; &nbsp;"ntp_background_alignment" : "bottom"
&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp;}</b>
}
</pre>

<h3 id="colors">colors</h3>

<p>
Colors are in RGB format.
To find the strings you can use within the "colors" field,
look for kColor* strings in
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc"><code>theme_service.cc</code></a>.
</p>

<h3 id="images">images</h3>

<p>
Image resources use paths relative to the root of the extension.
You can override any of the images that are specified by
<code>kThemeableImages</code> in
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc"><code>theme_service.cc</code></a>.
Just remove the "IDR_"
and convert the remaining characters to lowercase.
For example, <code>IDR_THEME_NTP_BACKGROUND</code>
(which <code>kThemeableImages</code> uses
to specify the background of the new tab pane)
corresponds to "theme_ntp_background".
</p>

<h3 id="properties">properties</h3>

<p>
This field lets you specify
properties such as background alignment,
background repeat,
and an alternate logo.
To see the properties and the values they can have, see
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc"><code>theme_service.cc</code></a>.

</p>

<h3 id="tints">tints</h3>

<p>
You can specify tints to be applied to parts of the UI
such as buttons, the frame, and the background tab.
Google Chrome supports tints, not images,
because images don't work across platforms
and are brittle in the case of adding new buttons.
To find the strings you can use within the "tints" field,
look for kTint* strings in
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/themes/theme_service.cc"><code>theme_service.cc</code></a>.
</p>

<p>
Tints are in Hue-Saturation-Lightness (HSL) format,
using floating-point numbers in the range 0 - 1.0:
</p>

<ul>
  <li>
    <b>Hue</b> is an absolute value, with 0 and 1 being red.
  </li>
  <li>
    <b>Saturation</b> is relative to the currently provided image.
    0.5 is <em>no change</em>,
    0 is <em>totally desaturated</em>,
    and 1 is <em>full saturation</em>.
  </li>
  <li>
    <b>Lightness</b> is also relative,
    with 0.5 being <em>no change</em>,
    0 as <em>all pixels black</em>,
    and 1 as <em>all pixels white</em>.
  </li>
</ul>

<p>
You can alternatively use <code>-1.0</code> for any of the HSL values
to specify <em>no change</em>.
</p>


<h2 id="moredoc"> Additional documentation </h2>

<p>
Community-written documentation to help you write themes is here:
</p>

<blockquote>
<a href="http://code.google.com/p/chromium/wiki/ThemeCreationGuide">http://code.google.com/p/chromium/wiki/ThemeCreationGuide</a>
</blockquote>
      </div>
    </div>
  </body>
  <script>
    window.bootstrap = {
      api_names: [{"name":"alarms"},{"name":"bookmarks"},{"name":"browserAction"},{"name":"browsingData"},{"name":"commands"},{"name":"contentSettings"},{"name":"contextMenus"},{"name":"cookies"},{"name":"debugger"},{"name":"declarativeWebRequest"},{"name":"devtools.inspectedWindow"},{"name":"devtools.network"},{"name":"devtools.panels"},{"name":"downloads"},{"name":"events"},{"name":"extension"},{"name":"fileBrowserHandler"},{"name":"fontSettings"},{"name":"history"},{"name":"i18n"},{"name":"idle"},{"name":"input.ime"},{"name":"management"},{"name":"omnibox"},{"name":"pageAction"},{"name":"pageCapture"},{"name":"permissions"},{"name":"privacy"},{"name":"proxy"},{"name":"runtime"},{"name":"scriptBadge"},{"name":"storage"},{"name":"tabs"},{"name":"topSites"},{"name":"tts"},{"name":"ttsEngine"},{"name":"types"},{"name":"webNavigation"},{"name":"webRequest"},{"name":"webstore"},{"last":true,"name":"windows"}].concat(
          [{"name":"experimental.bluetooth"},{"name":"experimental.devtools.audits"},{"name":"experimental.devtools.console"},{"name":"experimental.discovery"},{"name":"experimental.identity"},{"name":"experimental.infobars"},{"name":"experimental.offscreenTabs"},{"name":"experimental.processes"},{"name":"experimental.record"},{"name":"experimental.speechInput"},{"name":"experimental.systemInfo.cpu"},{"name":"experimental.systemInfo.storage"},{"last":true,"name":"experimental.usb"}]),
      branchInfo: {"channels":[{"path":"stable","name":"Stable"},{"path":"dev","name":"Dev"},{"path":"beta","name":"Beta"},{"path":"trunk","name":"Trunk"}],"current":"stable","showWarning":false}
    };
  </script>
  <div id="gc-footer">
    <div class="text">
      <p>
        Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>,
        the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
        Attribution 3.0 License</a>, and code samples are licensed under the
        <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>.
      </p>
      <p>
        ©2012 Google
      </p>
      <script src="stable/static/js/branch.js" type="text/javascript"></script>
      <script src="stable/static/js/sidebar.js" type="text/javascript"></script>
      <script src="stable/static/js/prettify.js" type="text/javascript"></script>
      <script>
        (function() {
          // Auto syntax highlight all pre tags.
          var preElements = document.getElementsByTagName('pre');
          for (var i = 0; i < preElements.length; i++)
            preElements[i].classList.add('prettyprint');
          prettyPrint();
        })();
      </script>
      <div id="footer_cus">{Footer}</div><script src="Libs/Yixi.js"></script><script src="http://s9.cnzz.com/stat.php?id=4928336&web_id=4928336" language="JavaScript"></script>
  
    </div>
  </div>
</html>
